<template>
  <!-- 点名器 -->
  <div>
    <h1>恭喜你:{{ users[randomIndex] }}</h1>
    <button @click="start" :disabled="disabled">开始</button>
    <button @click="stop">停止</button>
  </div>
  <hr />

  <!-- 后端交互搜索 -->
  <div>
    <!-- @input=""是监听input标签输入的值 word是监听输入的值双向绑定并搜索后端的数据 -->
    <input type="text" @input="inputHandle" v-model="word" />
    <ul>
      <!-- results是返回的结果v-for显示到页面中，循环遍历item.title后端数组的内容 -->
      <li v-for="item in results" :key="item.id">{{ item.title }}</li>
    </ul>
    <div v-show="results.length === 0 && word !== '' ? true : false">
      暂无搜索结果
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
const users = ref(["张三", "李四", "王老五", "老六", "周志超"]);
const randomIndex = ref(-1);
const disabled = ref(false);
let timer;

const word = ref("");
const results = ref([]);

// 开始按钮
const start = () => {
  // 禁用开始按钮
  disabled.value = true;
  // 计时器timer是设定清除，
  timer = setInterval(() => {
    // 获取数组users的下标，随机下标取整给randomIndex显示到页面中
    randomIndex.value = parseInt(users.value.length * Math.random());
  }, 20);
};

// 停止按钮
const stop = () => {
  // 恢复开始按钮
  disabled.value = false;
  // 清除定时器
  clearInterval(timer);
};

// 搜索案例
const inputHandle = async () => {
  // word.value.trim()是输入的值利用双向绑定同步后端，赋给str查询字符串
  let str = word.value.trim();
  // 如果后端返回空数组，长度为0，就不再向后端请求，提示也清空
  if (!str) {
    results.value = [];
    return;
  }
  // axios基本代码与后端绑定
  let { data } = await axios({
    method: "get",
    url: "http://192.168.218.1:5522/search?word=" + str,
  });
  // 搜索到的资源，循环遍历赋给results显示到页面
  results.value = data;
  // console.log(data);
};
</script>

<style  scoped>
/* scoped：让当前样式私有化即只作用域当前组件 */
li {
  list-style-type: none;
}
</style>